import React, { Component ,createContext} from 'react'
const {Provider,Consumer} = createContext();

class Son extends Component{
    
    state={
        sonName:''
    }
    render(){
        const {sonName} = this.state
        return <Consumer>
               {
                   store =>{
                        return  <div className="son">
                        我的名字叫{store.name}
                        <input type="text" value={sonName} onChange={ev =>this.setState({sonName:ev.target.value})}/>
                        <button onClick={()=>store.setName(sonName)}>改名字</button>
                    </div>
                   }
               }
        </Consumer>
    }
}



class Father extends Component{

    render(){
       
        return <div className="father">
            爸爸
            <Son></Son>
        </div>
    }
}

class TwoFather extends Component{

    render(){
       
        return <div className="father">
            二爸爸
            <Father></Father>
        </div>
    }
}

class GrandFather extends Component{
    state={
        name:'顺溜'
    }

    setName = name => this.setState({name})
    
    render(){
        return <Provider value={{name:this.state.name, setName:this.setName }}>
            <div className="grandFather">
                爷爷
                <TwoFather></TwoFather>
            </div>
        </Provider> 
    }
}

export default GrandFather